<template>
  <el-drawer v-model="isShowLyricList" direction="btt" :with-header="false" class="cus-lrc-drawer">
    <div class="text-right">
      <IconPark
        class="inline-block icon-hover"
        :icon="ExpandDownOne"
        :size="18"
        :stroke-width="3"
        @click="setLyricStatus(false)"
      ></IconPark>
    </div>
    <div class="flex h-5/6">
      <div class="w-1/2">
        <img class="w-52 h-52 rounded-lg" ref="domImg" :src="showImg" crossOrigin="''" @load="loadImg" alt="" />
      </div>
      <div class="lrc-container font-bold h-full overflow-x-hidden overflow-y-scroll w-1/2" ref="container">
        <ul class="text-center" ref="domUl">
          <li class="h-8 leading-8 cursor-pointer" v-for="(item, index) in formattedLrc" :key="index">
            <span>{{ item.lrc }}</span>
          </li>
        </ul>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import defImg from '@/assets/img/def-img.png'
import { usePlayerStore } from '@/stores/player'
import IconPark from '../icon-park/IconPark.vue'
import { ExpandDownOne } from '@icon-park/vue-next'
import { ref, toRefs, nextTick, reactive, watch, computed } from 'vue'
const { isShowLyricList, setLyricStatus, formattedLrc, currentTime, musicInfo, timeUpdate } = toRefs(usePlayerStore())
import { useLyric } from '@/hooks/useLyric'
import { useColorThief } from '@/hooks/useColorThief'

const { findIndex } = useLyric()

const { getPalette } = useColorThief()

const showImg = computed(() => musicInfo.value?.al?.picUrl ?? defImg)

const domUl = ref<HTMLUListElement>()
const container = ref<HTMLDivElement>()
const domImg = ref<HTMLImageElement>()

const state = reactive({
  containerH: 0, //容器高度
  ulH: 0, //ul 的高度
  liH: 0, //li 的高度
  partH: 0, //ul top 到 container 中间的距离
  maxOffset: 0, //最大偏移量
})

watch(
  () => isShowLyricList.value,
  () => {
    nextTick(() => {
      if (!isShowLyricList.value) return
      state.containerH = container.value!.clientHeight
      state.ulH = domUl.value!.clientHeight
      state.liH = domUl.value!.children[0].clientHeight
      state.maxOffset = state.ulH - state.containerH
    })
    timeUpdate.value(setOffset)
  }
)

const setOffset = () => {
  const index = findIndex(formattedLrc.value, currentTime.value)
  const partH = state.liH * index + state.liH / 2
  let offset = partH - state.containerH / 2
  if (offset < 0) {
    offset = 0
  }
  if (offset > state.maxOffset) {
    offset = state.maxOffset
  }
  domUl.value!.style.transform = `translateY(-${offset}px)`
  const activeLi = domUl.value?.querySelector(`.active`)
  if (activeLi) {
    activeLi.classList.remove(`active`)
  }

  const li = domUl.value?.children[index]
  if (li) {
    li.classList.add(`active`)
  }
}

// 图片加载完成的事件
const loadImg = async () => {
  // 跨域 crossOrigin="''"
  const colors = await getPalette(domImg.value as HTMLImageElement, 3)
  const rgb = colors.map((c) => `rgb(${c[0]},${c[1]},${c[2]})`)
  const dom = document.querySelector('.cus-lrc-drawer') as HTMLElement
  dom.style.setProperty('--c1', rgb[0])
  dom.style.setProperty('--c2', rgb[1])
}
</script>

<style lang="less" scoped>
.lrc-container {
  overflow-y: scroll;
  ul {
    transition: 0.2s;
    color: #a7a09c;
  }
  li {
    transition: 0.2s;
  }

  .active {
    color: #fff;
    transform: scale(1.2);
  }
}
/* scroll-view 不显示滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
</style>

<style lang="less">
.cus-lrc-drawer {
  height: 100% !important;
  background-image: linear-gradient(120deg, var(--c1) 0%, var(--c2) 100%);
}
</style>
